<template>
  <!-- 商品-商品规格 -->
  <div>
    <Card :bordered="false" dis-hover class="ivu-mts">
      <div class="new_card_pd">
        <!-- 筛选条件 -->
        <Form
            inline
            ref="artFrom"
            :model="artFrom"
            :label-width="labelWidth"
            :label-position="labelPosition"
            class="tabform"
            @submit.native.prevent
        >
          <Row :gutter="24" type="flex" justify="end">
            <Col span="24" class="ivu-text-left">
              <FormItem :label="$t('page.product.specification_search')+'：'">
                <Input
                    v-model="artFrom.rule_name"
                    placeholder="Input"
                    class="input-add"
                ></Input>
                <Button type="primary" @click="userSearchs" icon="md-search"></Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </Card>
    <!-- 相关操作 -->
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Button
          class="mr20"
          type="primary"
          @click="addAttr"
      >{{$t('page.product.add_specifications')}}</Button
      >
      <!-- 商品规格表格 -->
      <Table
          class="mt25"
          ref="selection"
          :columns="columns4"
          :data="tableList"
          :loading="loading"
          highlight-row
          no-data-text="No data available at the moment"
          no-filtered-data-text="No filtering results available at the moment"
      >
        <template slot-scope="{ row }" slot="attr_value">
          <span
              v-for="(item, index) in row.attr_value"
              :key="index"
              v-text="item"
              style="display: block"
          ></span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a @click="edit(row)">{{$t('page.product.edit')}}</a>
          <Divider type="vertical" />
          <a @click="del(row, $t('page.product.delete'), index)">{{$t('page.product.delete')}}</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
            :total="total"
            :current="artFrom.page"
            @on-change="pageChange"
            :page-size="artFrom.limit"
        />
      </div>
    </Card>
    <add-attr ref="addattr" @getList="userSearchs"></add-attr>
  </div>
</template>

<script>
import { mapState } from "vuex";
import addAttr from "../components/addAttr";
import { ruleListApi,deleteAttrApi } from "@/api/product";
export default {
  name: "productAttr",
  components: { addAttr },
  data() {
    return {
      loading: false,
      artFrom: {
        page: 1,
        limit: 10,
        rule_name: "",
      },
      // columns4: [
      //   {
      //     title: "ID",
      //     key: "id",
      //     width: 80,
      //   },
      //   {
      //     title: "Product Category",
      //     key: "rule_name",
      //     minWidth: 150,
      //   },
      //   {
      //     title: "Specification Name",
      //     key: "attr_name",
      //     minWidth: 250,
      //   },
      //   {
      //     title: "Specification Details",
      //     slot: "attr_value",
      //     minWidth: 300,
      //   },
      //   {
      //     title: "Operate",
      //     slot: "action",
      //     fixed: "right",
      //     width: 120,
      //   },
      // ],
      tableList: [],
      total: 0
    };
  },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/order", ["orderChartType"]),
    labelWidth() {
      return this.isMobile ? undefined : 150;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
	columns4(){
		return [
        // {
        //   title: "#",
        //   key: "id",
        //   width: 80,
        // },
        {
          title: $t('page.product.product_category'),
          key: "rule_name",
          minWidth: 150,
        },
        {
          title: $t('page.product.specification_name'),
          key: "attr_name",
          minWidth: 250,
        },
        {
          title: $t('page.product.specification_details'),
          slot: "attr_value",
          minWidth: 300,
        },
        {
          title: $t('page.product.operate'),
          slot: "action",
          fixed: "right",
          width: 120,
        },
      ]
	}
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 删除
    del(row, tit, num) {
      // let delfromData = {
      //   title: tit,
      //   num: num,
      //   url: `product/rule/del/${row.id}`,
      //   method: "DELETE",
      //   ids: '',
      // };
      // this.$modalSure(delfromData)
      //     .then((res) => {
      //       this.$Message.success(res.msg);
      //       this.tableList.splice(num, 1);
      //       if (!this.tableList.length) {
      //         this.artFrom.page =
      //             this.artFrom.page == 1 ? 1 : this.artFrom.page - 1;
      //       }
      //       this.getDataList();
      //     })
      //     .catch((res) => {
      //       this.$Message.error(res.msg);
      //     });
		  
		this.$Modal.confirm({
		      title: $t('page.product.del_attr'),
		      content: $t('page.product.remove_attr_confirm'),
		      okText: this.$t('common.confirm'),
		      cancelText: this.$t('common.cancel'),
		      onOk: async () => {
		        deleteAttrApi(row.id)
		            .then((res) => {
		              this.$Message.success(res.msg);
		              this.tableList.splice(num, 1);
		              if (!this.tableList.length) {
		                this.artFrom.page =
		                    this.artFrom.page == 1 ? 1 : this.artFrom.page - 1;
		              }
		              this.getDataList();
		            })
		            .catch((res) => {
		              this.$Message.error($t('page.product.update_failed'));
		            });
		      },
		      onCancel: () => {
					this.getDataList();
		      }
		    });  
    },
    addAttr() {
      this.$refs.addattr.ids = 0;
      this.$refs.addattr.modal = true;
    },
    // 编辑
    edit(row) {
      // this.$refs.addattr.ids = row.id;
      this.$refs.addattr.modal = true;
      this.$refs.addattr.getIofo(row);
    },
    // 列表；
    getDataList() {
      this.loading = true;
      ruleListApi(this.artFrom)
          .then((res) => {
            let data = res.data;
            this.tableList = data.list
            this.total = res.data.count;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$Message.error(res.msg);
          });
    },
    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.getDataList();
    },
  },
};
</script>

<style scoped lang="stylus">
.ivu-mts{
  /deep/.ivu-card-body{
    padding-bottom 0!important
    padding-top 24px!important
  }
}
.input-add {
  width: 250px;
  margin-right:14px;
}
/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  // background: #f3f3f3;
}
</style>